<template>
  <div>
    <div>获取系统偏好主题色(亮false/暗true)：{{ matches }}</div>
    <div>获取系统偏好主题色(亮false/暗true)：{{ isDark }}</div>
  </div>
</template>

<script setup lang="ts">
import { usePreferredDark } from '@vueuse/core'

// 方式1：直接获取系统的偏好主题色(亮false/暗true)
const isDark = usePreferredDark()

// 方式2：直接获取系统的偏好主题色(亮false/暗true)
const matches = ref(false)
const handler = (event: MediaQueryListEvent) => {
  // 系统颜色 = 亮色模式 = false，暗黑模式 = true
  matches.value = event.matches
}
const mediaQuery = window!.matchMedia('(prefers-color-scheme: dark)')
onMounted(() => {
  mediaQuery.addEventListener('change', handler)
})
onUnmounted(() => {
  mediaQuery.removeEventListener('change', handler)
})
</script>

<style scoped lang="scss"></style>
